/*
Moe's HTML5/CSS3 layout scheme
==============================
This layout is based on the Flexible Box Layout Module:

    http://www.w3.org/TR/css3-flexbox/

Which browsers support it?

    http://caniuse.com/#feat=flexbox

Main features are:

- 1 to 3 columns (more can be added as needed).
- Source order independence: displays columns in any order.
- Fluid or fixed layout width.
- Fluid content, fixed-width columns.
- 100% height columns.
- Elastic height for all elements.
- Complete control over column widths.
- Complete control over column gutters.
- Minimal markup and CSS classes.

Base markup is the following:

    <section class="moe-layout moe-layout-2-1-3">
        <header>
            A header
        </header>
        <section>
            <section>
                Main content
            </section>
            <aside>
                A sidebar
            </aside>
            <aside>
                Another sidebar
            </aside>
        </section>
        <footer>
            A footer
        </footer>
    </section>

The only required class is .moe-layout in the outter section. An extra class
can be used to hide or order columns. Combine the numbers as needed:

- 1: main content section
- 2: first sidebar in the source
- 3: second sidebar in the source

For example:

- .moe-layout-1: only displays main content
- .moe-layout-2: only displays first sidebar
- .moe-layout-3: only displays second sidebar
- .moe-layout-1-2: only displays main content / first sidebar, in this order
- .moe-layout-1-3: only displays main content / second sidebar, in this order
- .moe-layout-2-1: only displays first sidebar / main content, in this order
- ...
- .moe-layout-1-2-3: main content / first sidebar / second sidebar, in this order
- .moe-layout-1-3-2: main content / second sidebar / first sidebar, in this order
- ...

...and so on. These classes can also be used to customize gutters depending on
how many columns are used.

To customize layout and columns widths and gutters, override the "Extras"
section in the end of this file.
*/
html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
header,
footer,
section,
aside {
    display: block;
    padding: 0;
    margin: 0;
}
section.moe-layout,
section.moe-layout > section,
section.moe-layout > section > section,
section.moe-layout > section > aside:nth-of-type(1),
section.moe-layout > section > aside:nth-of-type(2) {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    box-flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
section.moe-layout {
    min-height: 100%;
}
section.moe-layout > section {
    box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
}
section.moe-layout > section > aside:nth-of-type(1),
section.moe-layout > section > aside:nth-of-type(2) {
    box-flex: 0;
    -moz-box-flex: 0;
    -webkit-box-flex: 0;
}
/* Column ordering. */
section.moe-layout-1 > section > section,
section.moe-layout-2 > section > section,
section.moe-layout-3 > section > section,
section.moe-layout-1-2 > section > section,
section.moe-layout-1-3 > section > section,
section.moe-layout-2-1 > section > aside:nth-of-type(1),
section.moe-layout-2-3 > section > aside:nth-of-type(1),
section.moe-layout-3-1 > section > aside:nth-of-type(2),
section.moe-layout-3-2 > section > aside:nth-of-type(2),
section.moe-layout-1-2-3 > section > section,
section.moe-layout-1-3-2 > section > section,
section.moe-layout-2-1-3 > section > aside:nth-of-type(1),
section.moe-layout-2-3-1 > section > aside:nth-of-type(1),
section.moe-layout-3-1-2 > section > aside:nth-of-type(2),
section.moe-layout-3-2-1 > section > aside:nth-of-type(2) {
    box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
}
section.moe-layout-1-2 > section > aside:nth-of-type(1),
section.moe-layout-1-3 > section > aside:nth-of-type(2),
section.moe-layout-2-1 > section > section,
section.moe-layout-2-3 > section > aside:nth-of-type(2),
section.moe-layout-3-1 > section > section,
section.moe-layout-3-2 > section > aside:nth-of-type(1),
section.moe-layout-1-2-3 > section > aside:nth-of-type(1),
section.moe-layout-1-3-2 > section > aside:nth-of-type(2),
section.moe-layout-2-1-3 > section > section,
section.moe-layout-2-3-1 > section > aside:nth-of-type(2),
section.moe-layout-3-1-2 > section > section,
section.moe-layout-3-2-1 > section > aside:nth-of-type(1) {
    box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
}
section.moe-layout-1-2-3 > section > aside:nth-of-type(2),
section.moe-layout-1-3-2 > section > aside:nth-of-type(1),
section.moe-layout-2-1-3 > section > aside:nth-of-type(2),
section.moe-layout-2-3-1 > section > section,
section.moe-layout-3-1-2 > section > aside:nth-of-type(1),
section.moe-layout-3-2-1 > section > section {
    box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
}
/* Restricting columns. */
section.moe-layout-1 > section > aside:nth-of-type(1),
section.moe-layout-1 > section > aside:nth-of-type(2),
section.moe-layout-2 > section > section,
section.moe-layout-2 > section > aside:nth-of-type(2),
section.moe-layout-3 > section > section,
section.moe-layout-3 > section > aside:nth-of-type(1),
section.moe-layout-1-2 > section > aside:nth-of-type(2),
section.moe-layout-1-3 > section > aside:nth-of-type(1),
section.moe-layout-2-1 > section > aside:nth-of-type(2),
section.moe-layout-2-3 > section > section,
section.moe-layout-3-1 > section > aside:nth-of-type(1),
section.moe-layout-3-2 > section > section {
    display: none;
}

/* --- Extras: override as needed. --- */

/* Default layout width (fluid). */
section.moe-layout {
    width: 100%;
    min-width: 750px;
}
/* Default main content width. */
section.moe-layout > section > section {
    min-width: 450px;
}
/* Default sidebar width. */
section.moe-layout > section > aside:nth-of-type(1),
section.moe-layout > section > aside:nth-of-type(2) {
    width: 200px;
}
/* Default layout spacing. */
header,
footer {
    margin: 20px;
}
section.moe-layout > section {
    margin: 0 20px;
}
/* Default space between columns (aka "gutter"). */
section.moe-layout-1-2 > section > section,
section.moe-layout-1-3 > section > section,
section.moe-layout-1-2-3 > section > section,
section.moe-layout-1-3-2 > section > section {
    margin: 0 20px 0 0;
}
section.moe-layout-2-1-3 > section > section,
section.moe-layout-3-1-2 > section > section {
    margin: 0 20px;
}
section.moe-layout-2-1 > section > section,
section.moe-layout-3-1 > section > section,
section.moe-layout-2-3-1 > section > section,
section.moe-layout-3-2-1 > section > section {
    margin: 0 0 0 20px;
}
/* Don't let user content break the layout.
section.moe-layout > section > section,
section.moe-layout > section > aside:nth-of-type(1),
section.moe-layout > section > aside:nth-of-type(2) {
    overflow: hidden;
}
*/
